<template>
    <section>
        <div class="servic-render servic-render__2">
            <div class="render-tit render__nav">
                <nav class="render-tabel" id="showRender">
                    <a class="render-item mui-ellipsis" href="javascript://" @click.prevent="onClickGroup" :id="item.id" v-for="item in group.slice(0, 4)" :key="item.id">{{item.classifyName}}</a>
                </nav>
                <div class="tit-down" @click="toggleFising">
                    <i class="down__icon down_icon__png" :class="{down:isAction}"></i>
                </div>
            </div>
            <div class="render-tit-pull js_classify_pull">
                <nav class="render-tabel-pull">
                    <a class="mui-col-xs-3 render-item-pull mui-ellipsis" href="javascript://" @click.prevent="onClickGroupCon" :id="item.id" v-for="item in group.slice(4)" :key="item.id">{{item.classifyName}}</a>
                </nav>
            </div>
            <ul class="mui-table-view mui-grid-view mui-table-view-border render-table" id="J_Classifys">
                <li class="mui-table-view-cell mui-media mui-col-xs-6 render-cell" v-for="item in groupItem" :key="item.id">
                    <a class="cell__href" href="javascript:;" :data-classUrl="item.href">
                        <i class="render-icon render-icon__tuniu" :style="objStyle(item.image)"></i>
                        <p class="render-text mui-ellipsis-2">{{item.name}}</p>
                    </a>
                </li>
            </ul>
        </div>
    </section>
</template>
<script>
    import $ from "jquery";
    import { mapState } from 'vuex'
    import { mapActions } from 'vuex'
    import { mapGetters } from 'vuex'
    import { FETCH_GOUP, FETCH_GOUPITEM } from '../../constants/actionTypes'
    import ajax from '../../utils/ajax'
    import net from '../../utils/net'
    import tool from '../../utils/tool'
    export default {
        data() {
            return {
                isAction: false
            }
        },
        replace: true,
        props: {
            list: Array
        },
        mounted() {
            this.getGroup();
           
        },
        computed: {
            // 使用对象展开运算符将 getters 混入 computed 对象中
            ...mapGetters({
                group: 'groupLoad',
                groupItem:'groupItemLoad'
            })
        },
        methods: {
            ...mapActions([FETCH_GOUP, FETCH_GOUPITEM]),
            objStyle(obj){
                let styleObject = {}
                styleObject.backgroundImage = `url(${obj})`
                styleObject.backgroundSize = 'contain'
                return styleObject;
            },
            toggleFising(){
                this.isAction = !this.isAction
                $('.js_classify_pull').toggle('5000');
            },
            getGroup() {
                var vm = this;
                let setting = {
                    url: "weixinApp/getClassify",
                    data: {},
                    callback: "succerGroup",
                    error: function (res) {
                        // console.log(res)
                    }
                }
                net().jsonp("weixinApp/getClassify", {}, function(json) {
                    alert(json);
                }, function() {

                });
                new ajax(setting);
                window.succerGroup = function (res) {
                    res = tool.clear(res);
                    res = tool.JSONParse(res);

                    vm.FETCH_GOUP(res.data.result);
                    // DOM渲染后执行
                    vm.$nextTick(function () {
                        this.groupItems();
                        $("#showRender a:first").addClass('active');
                    })
                }
            },
            getGroupContend(classify) {
                var vm = this;
                let setting = {
                    url: "weixinApp/getWeixinByClassify",
                    data: { classify: classify },
                    callback: "succerGroupItem",
                    error: function (res) {
                        // console.log(res)
                    }
                }
                new ajax(setting);
                window.succerGroupItem = function (res) {
                    res = tool.clear(res);
                    res = tool.JSONParse(res);
                    // console.log(res);
                    vm.FETCH_GOUPITEM(res.data.result);       
                }
            },
            groupItems() {
                let id = $("#showRender a:first").attr("id");
                this.getGroupContend(id)
            },
            onClickGroup(e){
                $("#showRender a").removeClass('active');
                $(e.target).addClass('active');
                let id = e.target.id;
                this.getGroupContend(id);
            },
            onClickGroupCon(e){
                let id = e.target.id;
                let text = $(e.target).text();

                let Gid = $("#showRender a:last").attr('id');
                let Gtext = $("#showRender a:last").text();

                $("#showRender a:last").text(text);
                $("#showRender a:last").attr('id', id);

                $(e.target).text(Gtext);
                $(e.target).attr('id', Gid);

                $("#showRender a:last").siblings().removeClass('active');
                $("#showRender a:last").addClass('active');

                $('.js_classify_pull').hide('5000');
                $(".tit-down i").removeClass('down');

                this.getGroupContend(id);
            }
        }

    }

</script>
<style>

</style>